<!DOCTYPE html>
<html lang="en">
<head>
    <title>Services</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="School Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //for-mobile-apps -->
    <link href="../assets/3/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="../assets/3/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src="../assets/3/js/jquery-1.11.1.min.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="../assets/3/js/move-top.js"></script>
    <script type="text/javascript" src="../assets/3/js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='#css?family=Righteous' rel='stylesheet' type='text/css'>
    <link href='#css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>

<body>
<!-- services -->
<div class="services">
    <div class="container">
        <div class="services-grid">
            <h3>我们提供</h3>

            <div class="line minus2">
            </div>

            <div class="services-grd">
                <div class="col-md-4 services-grd1">
                    <div class="col-xs-3 services-grd1-left">
                        <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-9 services-grd1-right">
                        <h4>课余期间提供丰富的水果</h4>
                        <p> 最新鲜、最健康的水果免费供您使用，让您在锻炼之余即使补充维生素，
                            从而使锻炼的效果最大化</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="col-md-4 services-grd1">
                    <div class="col-xs-3 services-grd1-left">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-9 services-grd1-right">
                        <h4>行业最优秀的教练为您服务</h4>
                        <p> 我们健身房的教练是全行业的佼佼者，具有国家级证书，可以提供最专业的
                        指导，让您的健身之旅不迷茫</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="col-md-4 services-grd1">
                    <div class="col-xs-3 services-grd1-left">
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                    </div>
                    <div class="col-xs-9 services-grd1-right">
                        <h4>健康专家制定的锻炼周期</h4>
                        <p> 不用担心健身时间太少而达不到效果，不用担心锻炼过度损伤身体，
                            健康专家为您合理安排锻炼时间</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="clearfix"> </div>
            </div>

        </div>

        <div>&ensp;</div>
        <div>&ensp;</div>
        <div>&ensp;</div>
        <div class="services-overview">
            <h3>课程浏览</h3>

            <div class="col-sm-4 col-sm-offset-10">
                <select class = "selectpicker someFront" id = "inputSortType" title="请选择" onclick="sort()">
                    <option value="1">热度排序</option>
                    <option value="2">开课时间排序</option>
                    <option value="3">名称排序</option>
                </select>
            </div>

            <div class="line minus2">
            </div>
            <div id="coursePlace">

            </div>
        </div>
        <!-- light-box -->
        <script src="../assets/3/js/lightbox-plus-jquery.min.js"></script>
        <link rel="stylesheet" href="../assets/3/css/lightbox.css">
        <!-- //light-box -->
    </div>
</div>
<!-- //services -->
<!-- footer -->
<!--<div class="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-grid-left">
                <p>老高乐牌健身房保留所有权利<a target="_blank" href="http://guantaow.taobao.com/">厚朴网络淘宝店</a><a target="_blank" href="http://www.moobnn.com">网页模板</a></p>
            </div>
            <div class="footer-grid-right">
                <ul>
                    <li><a class="facebook"> </a></li>
                    <li><a class="be"> </a></li>
                    <li><a class="twitter"> </a></li>
                    <li><a class="in"> </a></li>
                    <li><a class="v"> </a></li>
                </ul>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>-->
<!-- //footer -->
</body>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function(){

        let sortIdExit = document.cookie.indexOf("coursesortid");

        if (sortIdExit === -1)
        {
            let sortId = 1;
            $.cookie('coursesortid', sortId);
        }

        let currentSortId = $.cookie("coursesortid");

        $("#inputSortType").val(currentSortId);

        if (currentSortId == 1)
        {
            jQuery.post("/getCourseListOrderByHot",function(rst){//处理响应的结果
                insertHtml(rst);
            },"json");//表示返回数据的格式
        }else if (currentSortId == 2){
            jQuery.post("/getCourseListOrderByDate",function(rst){//处理响应的结果
                insertHtml(rst);
            },"json");//表示返回数据的格式
        }
        else{
            jQuery.post("/getCourseListOrderByName",function(rst){//处理响应的结果
                insertHtml(rst);
            },"json");//表示返回数据的格式
        }
    });


    $("#inputSortType").click(function (){

        setTimeout("temp()", 2000);

    })

    function temp(){
        let options = $("#inputSortType option:selected");
        let id = options.val();
        $.removeCookie("coursesortid", {path: '/'});
        $.cookie("coursesortid", id);
        window.location.reload();
    }

    function goCourseDetail(id){
        $.cookie('currentCourseId', id);
        window.location.replace("courseDetails.html");
    }

    function insertHtml(rst){
        let i = 0;
        for ( ; i < rst.length; i += 3)
        {
            if (i + 2 >= rst.length)
            {
                break;
            }
            insertHtmlCourseThree(rst[i], rst[i + 1], rst[i + 2]);
        }
        if (rst.length % 3 == 1){
            insertHtmlCourseOne(rst[i]);
        }
        if (rst.length % 3 == 2){
            insertHtmlCourseTwo(rst[i], rst[i + 1]);
        }
    }

    function insertHtmlCourseThree(rst1, rst2, rst3){
        let part = "";
        part += "<div class='services-overview-grids'>";

        part += insertHtmlModel(rst1);
        part += insertHtmlModel(rst2);
        part += insertHtmlModel(rst3);

        part += "</div>";

        $("#coursePlace").append(part);
    }

    function insertHtmlCourseOne(rst1){
        let part = "";
        part += "<div class='services-overview-grids'>";

        part += insertHtmlModel(rst1);

        part += "</div>";

        $("#coursePlace").append(part);
    }

    function insertHtmlCourseTwo(rst1, rst2){
        let part = "";
        part += "<div class='services-overview-grids'>";

        part += insertHtmlModel(rst1);
        part += insertHtmlModel(rst2);

        part += "</div>";

        $("#coursePlace").append(part);
    }

    function insertHtmlModel(rst){
        let part = "";
        part += "<div class='col-md-4 team-grid' onclick='goCourseDetail(\""+rst.courseId+"\")'>";
        part += "<div class=\"thumbnail team-grid-main\">";
        part += "<div class=\"box maxheight\">";
        let photoPath = rst.coursePhoto;
        part += "<a class=\"example-image-link\" href=\"../images/coursePhoto.jpg\" data-lightbox=\"example-1\" data-title=\"Guidance.\"><img class=\"example-image\" src=\"" + photoPath + "\">\n" +
            "        </a>";
        part += "</div>";
        part += "<div class=\"caption pretium\">";
        part += "<h4>" + rst.courseName + "</h4>";
        part += "<p>热度：" + rst.courseStudents + "</p>";
        part += "<p>开课时间：" + rst.courseStartTime + "</p>";
        part += "<p>课程类型：" + rst.courseType + "</p>";
        part += "<p>课程时间：" + rst.courseStartHour + "~" + rst.courseEndHour + "</p>";
        part += "<p> </p>";
        /*part += "<a href='#' onclick='goCourseDetail(\""+rst.courseId+"\")'>详情</a>";*/
        part += "</div>";
        part += "</div>";
        part += "</div>";

        return part;
    }

</script>

</html>
<style type="text/css">
    .someFront{
        font-family: 微软雅黑, "Microsoft YaHei";
        font-size: 20px;
        color: rgb(250,98,15);
        border:none;
    }
</style>